<template>
  <scrollable className="selector-list" @contextmenu="handleContextMenu()">
    <draggable
      :list="normalizedItems"
      :options="{ draggable: draggableSelector }"
      @change="handleChange"
    >
      <li
        v-for="(item, index) in normalizedItems"
        :key="item.value"
        class="selector-item"
        :class="{ 'selector-item--active': activeItems.includes(item.value) }"
        @contextmenu.stop="ev => handleContextMenu(ev, index)"
        @click="ev => handleSelect(ev, index)"
        @dblclick="ev => handleDoubleClick(ev, index)"
      >
        <div class="selector-item-text">{{ item.name }}</div>
        <div class="selector-actions">
          <slot name="actions" :item="item" />
        </div>
      </li>
    </draggable>
  </scrollable>
</template>

<script lang="ts" src="./Selector.vue.ts"></script>

<style lang="less" scoped>
@import '../styles/index';

.sortable-ghost {
  opacity: 0.7;
  background-image: none;
}

.sortable-chosen {
  opacity: 0.7;
  background-image: none;
}

.sortable-drag {
  border-color: var(--button);
}

.selector-list {
  .radius();

  height: 100%;
  list-style-type: none;
  margin: 0;
}

.selector-item {
  .padding-h-sides(2);

  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 30px;
  cursor: pointer;
  justify-content: space-between;
  color: var(--paragraph);
  border: 1px solid transparent;

  &.selector-item--active {
    background-color: var(--solid-input);
    color: var(--title);
    .weight(@medium);

    .selector-actions {
      opacity: 1;
    }
  }

  &:hover {
    .selector-actions {
      opacity: 1;
    }
  }
}

.selector-item-text {
  text-overflow: ellipsis;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}

.selector-actions {
  display: flex;
  flex-direction: row;
  font-size: 13px;
  opacity: 0.2;
}

.selector-drag-handle {
  cursor: move;
  .icon-hover();
}
</style>
